<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> New Document </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <script src="jquery-1.9.1.min.js"></script>

  <script type="text/javascript" src="xlsx.core.min.js"></script>
  <script type="text/javascript">  
  function readExcel(obj) {
  	 	    var dataRows = [];
            var files = obj.files;

            var fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二进制流方式读取得到整份excel表格对象
                        dataRows = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }

                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        dataRows = dataRows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        // break; // 如果只取第一张表，就取消注释这行
                    }
                }
                var str = "";
                $.each(dataRows,function(i,n){
                console.log(n.name);
                });

                console.log(dataRows);
                //$("#txtArea").val(dataRows);
				
				if(dataRows!=null && dataRows.length>0){
					var headRow = dataRows[0];
					var tableHeadTr = getRowHeadHtml(headRow);
					jQuery('#headAreaId').append(tableHeadTr);
					var rowHtml = [];
					for(var i = 0 ; i < dataRows.length ; i++){
						var dataRow = dataRows[i];
						var tableTr = getRowHtml(dataRow);
						rowHtml.push(tableTr);
					}
					jQuery('#rowAreaId').append(rowHtml.join(''));
				}
				
            };
			
			function getRowHeadHtml(dataRow){
				var tableHeadTr = "";
				var tds = [];
				for(var key in dataRow){
					var tdHtml = '<td>'+key+'</td>';
					tds.push(tdHtml); 
				}
				tableHeadTr = '<tr>'+tds.join('')+'</tr>';
				return tableHeadTr;
			}
			
			function getRowHtml(dataRow){
				var tableHeadTr = "";
				var tds = [];
				for(var key in dataRow){
					var tdHtml = '<td>'+dataRow[key]+'</td>';
					tds.push(tdHtml); 
				}
				tableHeadTr = '<tr>'+tds.join('')+'</tr>';
				return tableHeadTr;
			}

            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
  	// body...
  }
  
  
      
  </script>  
 </head>  
  
 <body>  
  <input type="file" id="excel-file" onchange="readExcel(this)"/>
<br>  

<div>
<table class="rowTableCss" style="border: 1px solid #ddd;">
	
	<thead id="headAreaId">
		
	<thead>
	<tbody id="rowAreaId">
		
	<tbody>
</table>
</div>
<style>
     .rowTableCss{
		min-width:400px;
		min-height:400px;height:auto;border-collapse: collapse;
	 }
	.rowTableCss,.rowTableCss tr, .rowTableCss tr td{
		border: 1px solid #ddd;
	}
	#headAreaId tr{height:50px;font-size:16px;font-weight:border;text-align:center;
		background-color:#F5F5F5;
	}
	#rowAreaId tr{height:30px;font-size:12px;text-align:center;}
	#rowAreaId tr:nth-child(odd){background:;}
</style>
 </body>  
</html> 